/* 导航栏开始 */
/* 顶部导航栏 */
.nav {
  z-index: 999;
  flex: content;
  position: fixed;
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  padding: 0 30px;
  color: #fff;
}

/* 导航栏logo */
.nav h1 a {
  display: block;
  background: url(../assets/logo.webp) no-repeat left/contain;
  height: 60px;
  width: 140px;
  line-height: 60px;
  margin-right: 10px;
}

/* 导航栏下拉按钮 */
.nav .more {
  background: url(../assets/moreIPButton.png) no-repeat left/contain;
  height: 18px;
  width: 15px;
  margin-right: 60px;
}

/* 导航栏的内容 */
.nav ul {
  display: flex;
  flex: 1;
  justify-content: space-evenly;
}

.nav ul li span {
  cursor: pointer;
  font-size: 13px;
  display: block;
  text-align: center;
}

.nav ul li span:nth-child(2) {
  font-size: 9px;
  color: #5c5c5c;
}

/* 下拉菜单 */
.nav ul li .drop-down {
  display: none;
  position: absolute;
  width: 110px;
  transform: translate(-25%);
  background-color: rgba(0, 0, 0, 0.4);
  /* background-color: pink; */
}

.nav ul li:hover .drop-down {
  display: block;
}

/* 下拉菜单浮动 */
.nav ul li .drop-down ul {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 10px;
}

.nav ul li .drop-down ul li {
  padding-bottom: 10px;
  font-size: 13px;
}

.nav ul li .drop-down ul li a {
  color: #FFF;
  padding-bottom: 10px;
}

.nav ul li .drop-down ul li:hover a {
  color: orange;
}

/* 导航栏下载 */
.nav .down {
  display: block;
  background: url(../assets/downloadButtonBG11.webp) no-repeat left/contain;
  width: 120px;
  height: 60px;
  cursor: pointer;
  line-height: 60px;
  text-align: center;
  font-weight: 700;
  /* margin-left: 180PX; */
  /* overflow: clip; */
}

/* 导航栏登录按钮 */
.nav .login {
  cursor: pointer;
  display: flex;

}

.nav .login img {
  margin-left: 10px;
  height: 20px;
  width: 22px;
}

.nav .login span {
  margin-left: 10px;
  font-size: 13px;
}

/* 导航栏结束 */



/* 妙手空空英雄界面 */
.box1 {
  z-index: 0;
  position: relative;
  background-image: url(../assets/bg-5ada2842.webp);
  background-repeat: no-repeat;
  /* height: 100vh; */
  background-size: cover;
  height: 746px;
  width: 1513px;
}



/* 右侧年龄限制 */
.box1 .shiling {
  position: absolute;
  background-color: #FFF;
  height: 60px;
  width: 50px;
  top: 100px;
  right: 20px;
  border-radius: 6px;
  /* right: ; */
}

/* 防沉迷 */
.box1 .fanchenmi {
  position: absolute;
  background-color: #FFF;
  height: 50px;
  width: 50px;
  top: 180px;
  right: 20px;
  border-radius: 6px;
  /* right: ; */
}

/* 中心下载 */
.box1 .centerDown {
  position: absolute;
  /* background-color: pink; */
  width: 300px;
  height: 54px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 50%);
}

/* 界面中心按钮下载 */
.box1 .centerDown img {
  object-fit: contain;
}

/* 轮播图 */
.box1 .carousel-lists {
  position: absolute;
  /* width: 100%; */
  /* margin: 0 auto; */
  width: 927px;
  /* background-color: pink; */
  height: 182px;
  left: 296px;
  top: 66.4vh;
  display: flex;
  justify-content: center;
}

/* .box1 .carousel-lists .carousel{
  background-color: skyblue;
  margin-right: 10px;
  border-radius: 10px;
  width: 400px;
} */



/* 容器基础样式 */
.box1 .carousel-lists .swiper {
  --swiper-navigation-size: 20px;
  width: 369px;
  height: 182px;
  /* margin-right: 10px; */
  border-radius: 10px;
  /* margin-left: 0; */
}

/* 轮播项样式 */
.box1 .carousel-lists .swiper .swiper-slide {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}


/* 修改分页器基础样式（长条+圆角） */
.box1 .carousel-lists .swiper-pagination-bullet {
  width: 30px;
  height: 2px;
  border-radius: 2px;
  background: #999;
  opacity: 1;
  margin: 0 4px !important;
}

/* 修改激活状态样式 */
.box1 .carousel-lists .swiper-pagination-bullet-active {
  background: #fff;
}



.box1 .carousel-lists .swiper .swiper-button-prev,
.box1 .carousel-lists .swiper .swiper-button-next {
  background-color: rgba(0, 0, 0, 0.4) !important;
  /* 黑色背景 */
  border-radius: 50% !important;
  /* 圆形效果 */
  width: 30px !important;
  /* 按钮尺寸 */
  height: 30px !important;
  opacity: 0;
  transition: 0.3s;
  /* 过渡动画 */
}

.box1 .carousel-lists .swiper .swiper-button-prev::after,
.box1 .carousel-lists .swiper .swiper-button-next::after{
  color: #fff !important;
  /* 白色箭头 */
  font-size: 8px !important;
  /* 调整箭头大小 */
}

/* .box1 .carousel-lists .swiper:hover .swiper-button-prev,
.box1 .carousel-lists .swiper:hover .swiper-button-next{
  background-color: rgba(0, 0, 0, 0.8) !important;
  opacity: 1;
} */

.box1 .carousel-lists .swiper:hover .swiper-button-prev{
  transform: translate(15%);
  background-color: #1c2836 !important;
  opacity: 1;
}
.box1 .carousel-lists .swiper:hover .swiper-button-next{
  transform: translate(-15%);
  background-color: #1c2836 !important;
  opacity: 1;
}



/* 轮播图右侧列表 */
.box1 .carousel-lists .lists {
  position: relative;
  background-color: rgb(24, 23, 23);
  width: 548px;
  border-radius: 10px;
  height: 182px;
}

.box1 .carousel-lists .lists>ul {
  height: 40px;
  line-height: 40px;
  color: #FFF;

}

.box1 .carousel-lists .lists ul li {
  margin-left: 48px;
  display: inline-block;
  cursor: pointer;
}

.box1 .carousel-lists .lists ul li .title {
  position: relative;
}

.box1 .carousel-lists .lists ul li:nth-child(1) .title {
  position: relative;
  color: #b8a26c;
  z-index: 999;
}

.box1 .carousel-lists .lists ul li:hover .title {
  color: #b8a26c;
  z-index: 999;
}

.box1 .carousel-lists .lists ul li .title img {
  display: none;
  height: 16px;
  width: 76px;
  position: absolute;
  left: -22px;
  top: 24px;
}

.box1 .carousel-lists .lists ul li:nth-child(1) .title img {
  display: block;
}

.box1 .carousel-lists .lists ul li:hover .title img {
  display: block;
}


/* 隐藏的图片和内容 */

.box1 .carousel-lists .lists ul .category-content {
  display: none;
  position: absolute;
  left: 0;
  top: 40px;
  width: 500px;
  height: 134px;
  border-top: #bababa solid 1px;
  margin: 0 24px;
  background-color: rgb(24, 23, 23);
  ;

}

.box1 .carousel-lists .lists ul li:nth-child(1) .category-content {
  display: block;
  /* background-color: pink; */

  /* z-index: 5; */
}


/* .box1 .carousel-lists .lists ul li:nth-child(2) .category-content {
  background-color: red;
}

.box1 .carousel-lists .lists ul li:nth-child(3) .category-content {
  background-color: purple;
}

.box1 .carousel-lists .lists ul li:nth-child(4) .category-content {
  background-color: skyblue;
}

.box1 .carousel-lists .lists ul li:nth-child(5) .category-content {
  background-color: blue;
} */

.box1 .carousel-lists .lists ul li:hover .category-content {
  display: block;
}

/* 分类内容的行高 flex布局 */
.box1 .carousel-lists .lists ul li .category-content .category-content-item {
  height: 33px;
  display: flex;
  font-size: 14px;
  /* justify-content: space-between; */
  align-items: center;
  /* border: 1px pink solid; */
}

.box1 .carousel-lists .lists ul li:nth-child(1) .category-content .category-content-item span:nth-child(1) {
  border: #db7040 solid 1px;
  color: #db7040;
  margin-right: 20px;
  height: 22px;
  line-height: 22px;
  padding: 0px 4px;
}

.box1 .carousel-lists .lists ul li:nth-child(2) .category-content .category-content-item span:nth-child(1) {
  border: #af7855 solid 1px;
  color: #af7855;
  margin-right: 20px;
  height: 22px;
  line-height: 22px;
  padding: 0px 4px;
}

.box1 .carousel-lists .lists ul li:nth-child(3) .category-content .category-content-item span:nth-child(1) {
  border: #edeaba solid 1px;
  color: #edeaba;
  margin-right: 20px;
  height: 22px;
  line-height: 22px;
  padding: 0px 4px;
}

.box1 .carousel-lists .lists ul li:nth-child(4) .category-content .category-content-item span:nth-child(1) {
  border: #688d53 solid 1px;
  color: #688d53;
  margin-right: 20px;
  height: 22px;
  line-height: 22px;
  padding: 0px 4px;
}

.box1 .carousel-lists .lists ul li:nth-child(5) .category-content .category-content-item span:nth-child(1) {
  border: #6c81aa solid 1px;
  color: #6c81aa;
  margin-right: 20px;
  height: 22px;
  line-height: 22px;
  padding: 0px 4px;
}

.box1 .carousel-lists .lists ul li .category-content .category-content-item span:nth-child(2) {
  height: 33px;
  color: #b5b5b4;
  flex: 1;
}

.box1 .carousel-lists .lists ul li .category-content .category-content-item span:nth-child(3) {
  color: #888889;
}



/* 下滑 */
/* .box1 .glide{
  position: fixed;
} */
.box1 .glide {
  position: fixed;
  display: flex;
  top: 706px;
  left: 50%;
  height: 40px;
  width: 220px;
  /* background-color: pink; */
  color: #b7a16b;
  font-size: 12px;
  z-index: 2;
  transform: translate(-50%);
  z-index: 4;
}

.box1 .glide img {
  height: 40px;
  width: 40px;
  margin: -20px 10px 0 10px;
  animation: glide 1s linear infinite alternate;
  z-index: 4;
}

@keyframes glide {
  from {
    margin: -20px 10px 0 10px;
  }

  to {
    margin: 0px 10px 0 10px;
  }
}